Summary

• Adds a Folder field to the Edit modal of all 4 host types (Proxy Hosts, Redirection Hosts, Streams, 404 Hosts), backed by meta.folder — no DB migration required
• Groups hosts by folder in each dashboard table using TanStack Table v8 built-in grouping, with a collapsible folder header row showing enabled/disabled badge counts
• Extends client-side search to match folder names in addition to existing fields
• Hosts without a folder appear at the top of the table as a flat list; named folders appear below, collapsed by default

Technical details

• Data model: meta.folder (string, optional) on existing meta JSON column — zero schema changes
• Shared infrastructure: TableBody extended with a renderRow escape-hatch (backward-compatible) allowing custom grouped row rendering
• Reusable component: FolderField combobox reads existing folder names from the React Query cache via prefix-matching (getQueriesData) for autocomplete — no extra API calls
• TanStack grouping: hidden folder accessor column drives grouping; columnVisibility: { folder: false } keeps it out of rendered cells

Behaviour

Screenshots

Test plan

• Start dev stack: ./scripts/start-dev → open http://localhost:3081
• Edit a Proxy Host → Details tab → "Folder" field visible below Access List
• Assign two hosts to the same folder → folder accordéon appears in table
• Click folder header → expands/collapses
• Reload page → folders collapsed again
• Type folder name in search → folder header appears (stays closed)
• Type domain name in search → matching hosts found regardless of folder
• Edit host → clear Folder field → host moves back to flat list
• Repeat above for Redirection Hosts, Streams, 404 Hosts

🤖 Generated with Claude Code